<template>
  <div class="category_item">
    <div class="flex flex-between-center header">
      <span class="color-666">{{ title }}</span>
      <p class="tools">
        <span class="pointer" @click="$emit('upSortItem')"><i class="el-icon-top" /></span>
        <span class="pointer" @click="$emit('downSortItem')"><i class="el-icon-bottom" /></span>
        <span class="pointer" @click="$emit('deleteItem')"><i class="el-icon-delete" /></span>
      </p>
    </div>
    <div class="input_wrapper">
      <div class="flex name">
        <label class="flex align-center justify-center"><span class="required-icon">*</span>主标题</label>
        <el-input v-model="formData.main.title" placeholder="请输入主标题" clearable />
      </div>
    </div>
    <banner-form type="categoryForm" :form-data="imgData" />
    <p class="color-666" style="margin-bottom:10px">二级推荐商品</p>
    <goods-link v-for="(item, index) in formData.goods" :key="item.goods_id" :goods-data="item" :show-tool="true" @handleDelete="deleteGoods(index)" @upSort="upSort(index)" @downSort="downSort(index)" />
    <div v-if="formData.goods.length < 3" class="add-div" @click="openSelect">
      <i class="el-icon-plus" />添加商品({{ formData.goods.length }}/3)
    </div>
    <goods-dialog ref="goodsDialog" :multiple="true" :max-num="3" :show-checked-tool="true" @setSelect="setSelect" />
  </div>
</template>

<script>
import bannerForm from './bannerForm'
import goodsLink from '../../../recommend/compoments/goodsLink'
import goodsDialog from '@/components/goodsDialog.vue'
export default {
  components: { bannerForm, goodsLink, goodsDialog },
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imgData: {
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      }
    }
  },
  watch: {
    imgData: {
      deep: true,
      handler(newVal) {
        for (const key in newVal) {
          this.formData.main[key] = newVal[key]
        }
      }
    }
  },
  mounted() {
    for (const key in this.imgData) {
      this.imgData[key] = this.formData.main[key]
    }
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return
      }
      const item = this.formData.goods[index]
      this.$set(this.formData.goods, index, this.formData.goods[index - 1])
      this.$set(this.formData.goods, index - 1, item)
    },
    // 降序
    downSort(index) {
      if (index === this.formData.goods.length - 1) {
        return
      }
      const item = this.formData.goods[index]
      this.$set(this.formData.goods, index, this.formData.goods[index + 1])
      this.$set(this.formData.goods, index + 1, item)
    },
    // 删除商品
    deleteGoods(index) {
      this.formData.goods.splice(index, 1)
    },
    // 设置选中
    setSelect(goodsList) {
      this.formData.goods = goodsList
    },
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true
      this.$refs.goodsDialog.selectItems = [...this.formData.goods]
    }
  }
}
</script>

<style lang="scss" scoped>
.tools {
  span {
    margin-left: 10px;
    color: #666666;
  }
}

.input_wrapper {
  margin-top: 10px;
  margin-left: 0;

  &>div {
    label {
      width: 90px;
    }
  }
}

/deep/.link_val {
  margin-bottom: 15px;
}
</style>
